<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>ajax和json综合</h1>
<!--
    获取好友列表
    TODO:单击当前按钮就会调用method01()函数，在该函数中向后台发送请求参数，然后处理后台响应的数据
-->
<input type="button" value="响应数据是json字符串" onclick="method01()"> <br>
<hr>
<h3>好友列表</h3>
<!--存放查询好友的结果信息-->
<div id="messageDiv"></div>
<table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
    <tr>
        <th>id</th>
        <th>name</th>
        <th>age</th>
    </tr>
    <!-- <tr>
        <td>001</td>
        <td>张三</td>
        <td>18</td>
    </tr> -->
</table>

<script type="text/javascript" src="./axios-0.18.0.js"></script>
<script type="text/javascript">
    function method01(){
    let table=document.getElementById("myTable");

        axios.post("http://localhost:8080/axiosJsonDemo01Servlet")
        .then(resp=>{
           console.log(resp.data)
           let data=resp.data;
          document.getElementById("messageDiv").innerHTML=data.message;

            concent="";
            for(let friend of data.valueData){
                concent = concent+=`<tr>
                                   <td>${friend.id}</td>
                                   <td>${friend.name}</td>
                                   <td>${friend.age}</td>
                                   </tr>`;
            }
            document.getElementById("myTable").innerHTML=concent
        });

    }
</script>

</body>
</html>